<template>
  <div ref="dataScreen" v-loading="loading" :class="[isFullscreen ? 'dataScreen' : 'dataScreen screenStyle' ]">
    <h2>{{ $t('大数据显示屏') }}</h2>
    <!-- 正常 -->
    <!-- <svg-icon v-if="isFullscreen" icon-class="fullscreen" @click="fullscreen" /> -->
    <!-- 全屏 -->
    <!-- <svg-icon v-else icon-class="exit-fullscreen" @click="exitScreen" /> -->

    <el-row :gutter="20">
      <el-col :span="7" class="left">
        <div class="boxall">
          <ul class="screenData data-flex">
            <li>
              <p>470</p>
              <p>{{ $t('资产管理规模(亿)') }}</p>
            </li>
            <li>
              <p>460</p>
              <p>{{ $t('基金管理规模(亿)') }}</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall" style="">
          <ul class="screenData data-flex">
            <li>
              <p>24</p>
              <p>{{ $t('累计投资项目(个)') }}</p>
            </li>
            <li>
              <p>2</p>
              <p>{{ $t('已上市项目(个)') }}</p>
            </li>
            <li>
              <p>50</p>
              <p>{{ $t('上市首日浮盈(亿)') }}</p>
            </li>
            <li>
              <p>4</p>
              <p>{{ $t('上市准备中项目(个)') }}</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall" style="height: calc(100% - 310px)">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('已投项目行业分布(个)') }}</p>
            <DealIndustry ref="DealIndustry" :chart-data="dealIndustryData" />
          </div>
          <div class="boxfoot" />
        </div>
        <!-- <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('项目状态(个)') }}</p>
            <DealState ref="DealState" :chart-data="dealStatusData" />
          </div>
          <div class="boxfoot" />
        </div> -->
      </el-col>
      <el-col :span="10">
        <div class="boxall noborder" style="height: calc(100% - 395px);">
          <div class="map" style="height:100%;">
            <MapChart ref="MapChart" :chart-data="chartData" />
          </div>
        </div>
        <!-- <div class="boxall" style="height: calc((100% - 140px) / 2);">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('') }}</p>
            <DealPhase ref="DealPhase" :chart-data="dealStageData" />
          </div>
          <div class="boxfoot" />
        </div> -->
        <div class="boxall">
          <div style="height:340px;">
            <p class="chartTit">{{ $t('项目状态') }}</p>
            <DealState ref="DealState" :chart-data="dealStatusData" />
          </div>
          <div class="boxfoot" />
        </div>
      </el-col>
      <el-col :span="7" class="right">
        <div class="boxall">
          <ul class="screenData data-flex">
            <li>
              <p>1</p>
              <p>{{ $t('直投项目') }}</p>
            </li>
            <li>
              <p>23</p>
              <p>{{ $t('基金项目') }}</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall">
          <ul class="screenData data-flex" style="">
            <li>
              <p>24</p>
              <p>{{ $t('累计投资金额(亿)') }}</p>
            </li>
            <li>
              <p>1</p>
              <p>{{ $t('投资回款总额(亿)') }}</p>
            </li>
            <li>
              <p>38</p>
              <p>{{ $t('整体盈亏情况(亿)') }}</p>
            </li>
            <li>
              <p>48</p>
              <p>{{ $t('已上市部分对应市值(亿)') }}</p>
            </li>
            <li>
              <p>2.61</p>
              <p>{{ $t('回报倍数(倍)') }}</p>
            </li>
          </ul>
          <div class="boxfoot" />
        </div>
        <div class="boxall" style="height: calc(100% - 369px)">
          <div style="height:100%;">
            <p class="chartTit">{{ $t('已投项目阶段：股权类(个)') }}</p>
            <DealType ref="DealType" :chart-data="dealTypeData" />
          </div>
          <div class="boxfoot" />
        </div>
        <!-- <div class="boxall">
          <div style="height:100%;">
            <p class="chartTit lt">{{ $t('项目团队统计') }}</p>
            <DealTeam ref="DealTeam" :chart-data="dealTeamData" />
          </div>
          <div class="boxfoot" />
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import MapChart from './chart/mapChart'
import DealType from './chart/dealType'
import DealState from './chart/dealState'
// import DealPhase from './chart/dealPhase'
// import DealTeam from './chart/dealTeam'
import DealIndustry from './chart/dealIndustry'
import {
  countDealArea,
  findDealTypeProportion,
  countIndustryFocus,
  findDealStatusProportion,
  countDealStage,
  dealTeamCount,
  dataScreenSummary
} from '@/api/base/deal/dealBase'
export default {
  components: {
    MapChart,
    DealType,
    DealState,
    // DealPhase,
    // DealTeam,
    DealIndustry
  },
  data() {
    return {
      loading: false,
      // 汇总值数据
      summaryData: {},
      // 投资地域统计
      chartData: [],
      // 项目类型占比
      dealTypeData: [],
      // 聚焦行业统计
      dealIndustryData: [],
      // 项目状态占比
      dealStatusData: [],
      // 项目阶段统计
      dealStageData: [],
      // 项目团队统计
      dealTeamData: [],
      dynamicHeight: 180,
      isFullscreen: true,
      boxHeight: 350,
      dataHeight: 0,
      // 由于修改项目地域分布countDealArea改成了post方法
      queryParams: {}
    }
  },
  computed: {
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.load()
      })()
    }
    this.$nextTick(() => {
      this.load()
    })
  },
  methods: {
    // 初始化数据
    initData() {
      this.loading = true
      countDealArea(this.queryParams).then(response => {
        this.chartData = response.data
      })
      findDealTypeProportion().then(response => {
        this.dealTypeData = response.data
      })
      countIndustryFocus().then(response => {
        this.dealIndustryData = response.data
      })
      findDealStatusProportion().then(response => {
        this.dealStatusData = response.data
      })
      countDealStage({}).then(response => {
        this.dealStageData = response.data
      })
      dealTeamCount(null).then(response => {
        this.dealTeamData = response.rows
      })

      // 查询汇总值数据
      dataScreenSummary().then(response => {
        this.summaryData = response.data
      })

      this.loading = false
    },
    fullscreen() {
      this.isFullscreen = false
      this.load()
    },
    exitScreen() {
      this.isFullscreen = true
      this.load()
    },
    load() {
      this.$nextTick(() => {
        if (this.$refs?.dataScreen?.clientHeight !== undefined) {
          this.boxHeight = this.$refs.dataScreen.clientHeight * 0.58
          this.dynamicHeight = this.$refs.dataScreen.clientHeight - this.boxHeight - 110
          this.dataHeight = this.boxHeight - this.dynamicHeight - 10

          var obj = {}
          for (obj in this.$refs) {
            if (this.$refs[obj]?.initChart !== undefined) {
              this.$refs[obj].initChart()
              this.$refs[obj].chart.resize()
              this.$refs[obj].$_resizeHandler()
            }
          }
          this.initData()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.data-flex{
  display: block;
  li{
    width: calc(50% - 5px);
    display: inline-block;
    margin-bottom: 10px;
  }
}
.boxall{
  margin-bottom: 35px!important;
}
.screenData li p{
  font-size: 17px;
}
</style>
